@extends('admin::layouts.admin')
@section("main-content")
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-widget">
                <div class="box-header with-border">
                    <div class="row">
                        <form id="search-form" name="searchForm"></form>
                        <div class="col-sm-12" style="margin-top: 5px" id="me-table-buttons"></div>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <table id="example2" class="table table-bordered table-hover"></table>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
@endsection
@include('admin::common.datatable')
@push('style')
    <link rel="stylesheet" href="{{ asset('admin-assets/plugins/select2/select2.min.css') }}">
    <style>
        form div[class^='col-'] {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        form div .input-group {
            width: 100%;
        }

        form .input-group span.input-group-addon {
            width: 30%;
        }
    </style>
@endpush
@push("script")
    <script src="{{ asset('admin-assets/plugins/select2/select2.min.js') }}"></script>
    <script>
        $.extend($.fn.meTables, {
            menusCreate: function (params) {
                params.class += " select2"
                return '<select ' + this.handleParams(params) + ' data-width="200"><option value="0">顶级分类</option>{!! $group !!}</select>';
            },
            menusSearchTopCreate: function (params) {
                return '<div class="col-sm-3"><div class="input-group">' +
                    '<span class="input-group-addon">' + params.title + '</span>\n' +
                    '<select name="parent" class="select2" style="width: 100%">\n' +
                    '                                    <option value="">请选择分类</option>\n' +
                    '                                    <option value="0">顶级分类</option>\n' +
                    '                                    {!! $group !!}\n' +
                    '                                </select></div></div>'
            },
            menusSearchMiddleCreate: function () {

            },
        });

        $(function () {
            var arrParents = @json(array_pluck($parents, 'name', 'id'), 320);
            arrParents["0"] = "顶级分类";
            var arrStatus = @json($status, 320),
                arrColors = {"10": "label-success", "0": "label-warning", "-1": "label-danger"},
                table = $("#example2").meTables({
                    title: "导航栏目",
                    searchType: 'top',
                    checkbox: {},
                    buttonSelector: "#me-table-buttons",
                    table: {
                        columns: [
                            {
                                title: "id",
                                data: "id",
                                edit: {type: "hidden"},
                                defaultOrder: "desc",
                                search: {},
                            },
                            {
                                title: "名称",
                                data: "name",
                                sortable: false,
                                edit: {required: "true", rangelength: "[2, 50]"},
                                search: {type: "text"},
                            },
                            {
                                title: "地址",
                                data: "url",
                                sortable: false,
                                edit: {required: "true", rangelength: "[1, 255]"},
                                search: {type: "text"},
                            },
                            {
                                title: "图标",
                                data: "icon",
                                sortable: false,
                                className: 'text-center',
                                render: function (data) {
                                    return data ? "<i class=\"fa " + data + "\"></i>" : data;
                                },
                                edit: {value: "fa-cube", required: "true", rangelength: "[2, 255]"}
                            },
                            {
                                title: "父级名称",
                                data: "parent",
                                render: function (data) {
                                    return arrParents[data] ? arrParents[data] : "顶级分类";
                                },
                                edit: {"type": "menus", "number": true},
                                search: {"type": "menus"}
                            },
                            {
                                title: "状态",
                                data: "status",
                                sortable: false,
                                render: $.fn.meTables.renderStatus(10, arrStatus),
                                className: 'text-center',
                                value: @json($status, 320),
                                search: {
                                    type: "select",
                                    class: "select2",
                                    multiple: "multiple",
                                    name: "status:in",
                                    style: "width: 100%",
                                    all: false,
                                },
                                edit: {"type": "radio", "number": true, "default": 10, "required": true}
                            },
                            {
                                title: "排序",
                                data: "sort",
                                edit: {"number": true, value: 100}
                            },
                            {
                                title: "创建时间",
                                data: "created_at",
                                className: 'text-center',
                            },
                            {
                                title: "修改时间",
                                data: "updated_at",
                                className: 'text-center',
                            }
                        ]
                    }
                });

            $(".select2").select2();
        })
    </script>
@endpush